<template>
  <div class="reservationItem">
    <div class="reservation-item">
      <div class="info-btn">
        <p class="time">预约时间:&nbsp;{{items.appointDate}}&nbsp;{{items.appointTime}}</p>
        <div class="btn-group" v-if="newstatus === 0" style="float:right">
          <x-button class="theme-bt bt-s bt-blue" mini @click.native="updateReservation(items.id, 0)">同意</x-button>
          <x-button class="theme-bt bt-c" mini @click.native="updateReservation(items.id, 3)">拒绝</x-button>
        </div>
        <div class="renter-status" v-if="newstatus === 1">
          <span v-if="items.status === 0">预约成功</span>
          <span v-if="items.status === 2">租客取消</span>
          <span v-if="items.status === 3">房东取消</span>
        </div>
      </div>
      <div class="component ui-house-li">
      <div class="house" @click.stop="$router.push({ path: detailPath ? detailPath : '/detail', query: {id: items.houseId} })">
        <slot name="triangle"></slot>
        <div class="left__wrap">
          <p v-if="items.isFreeDeposit || items.isFreebet" class="mian-ya">免押</p>
          <p class="cover" :style="[{background: `url(${items.housePersons.coverImg})`}, bgImgStyle]"><img class="h-thumb" :src="items.housePersons.coverImg+'?imageView2/0/w/414/h/309'" /></p>
        </div>
        <div class="ui-house-info">
            <h3 class="name">{{items.housePersons.houseTitle}}</h3>
          <div class="adress-price" :class="{valign: charLenth(items.housePersons.houseTitle)}">
            <div class="vmid">
              <p class="address">{{items.housePersons.address}}</p>
              <div class="publish-time" v-if="showPublishTime">
                <span>发布时间：{{items.createTime | formatDate}}</span>
              </div>
              <p class="price-time">
                <span class="price"><em>￥{{items.housePersons.rentalPrice}}</em>/月</span>
              </p>
            </div>
          </div>
          <p class="label clearfix">
            <span v-for="i in span(items.housePersons.highlights)">{{ i }}</span>
          </p>
          <slot name="BTaction"></slot>
        </div>
      </div>
  </div>
  <div class="info-detail">
    <img class="head-img" width="100%" :src="items.webUser.headImgUrl || require('../../../images/avatar_default.png')" alt="">
    <div class="inner">
      <div><span class="name">{{items.webUser.trueName || (items.webUser && items.webUser.trueName)}}</span><span class="tip">租客</span></div>
      <p class="tel">{{items.webUser.mobile}}</p>
      <a :href="`tel:${items.webUser.mobile}`"></a>
    </div>
  </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Object,
      required: true,
      default: {}
    },
    status: {
      type: Number,
      required: true,
      default: 0
    },
    newstatus: '',
    detailPath: {
      type: String,
      required: false,
      default: '/detail'
    },
    showPublishTime: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      bgImgStyle: {
        display: 'block',
        'background-origin': 'border-box',
        'background-size': this.maxImg ? 'contain' : 'cover',
        'background-position': 'center',
        'background-repeat': 'no-repeat'
      },
      h3Class: 'vmid' + (Math.random() * 10000000).toFixed(0)
    }
  },
  methods: {
    // 同意预约:0, 拒绝预约: 3
    updateReservation (id, code) {
      let that = this
      let alertTxt = code === 0 ? '同意' : '拒绝'
      this.$vux.confirm.show({
        title: '提示',
        content: `您确定${alertTxt}与该租客的预约吗？`,
        onConfirm () {
          that.$axiosPosting(that.$api.updateRenterAppointment, { id: id, status: code }).then(res => {
            if (res.code === '0000') {
              if (code === 0) {
                that.$emit('getData', '0')
              } else if (code === 3) {
                that.$emit('getData', '3')
              }
            } else {
              alert('预约确认失败！')
            }
          })
        }
      })
    },
    span (span) {
      let sp = []
      if (span) sp = span.split(',')
      return sp
    },
    charLenth (txt) {
      if (!txt) return false
      let cl = txt.replace(/[\u2E80-\u9FFF]/g, 'aa').length
      // if (cl < 26) return true
      if (cl < 26) return false
      else return false
    }
  }
}
</script>

<style lang="less">
  .reservationItem{
    background: #f4f4f4;
    .weui-btn.theme-bt {
      padding: 0 15px;
    }
    .weui-btn + .weui-btn {
      margin-top: 0;
    }
    .bt-c {
      color: #097dde;
      background-color: #fff;
      border: 1px solid #097dde;
    }
    .bt-blue {
      margin-left: 2px;
      background: #097dde;
    }
    .reservation-item{
      /*margin-bottom: .3rem;*/
      padding-top: 15px;
      background: #fff;
      border-bottom: 5px solid #f8f8f8;
      .info-btn{
        display: flex;
        width:99%!important;
        font-size:0.8rem;
        height: 30px;
        margin: 2px 15px 3px 2px;
        justify-content: space-between;
        align-items: center;
      }
      .head-img{
        width: 43px;
        border-radius: 50%;
        vertical-align: top;
      }
      .info-detail {
        position: relative;
        padding: 15px;
        .inner {
          display: inline-block;
          margin: 5px 0 0 8px;
          .name {
            font-size: 16px;
            color: #000;
          }
          .tip {
            margin-left: 5px;
            padding: 0 6px;
            background: #ff9600;
            color: #fff;
            border-radius: 3px;
            font-size: 10px;
          }
          &:last-child {
            color: #666;
          }
          a {
            position: absolute;
            right: 18px;
            top: 0;
            bottom: 0;
            margin: auto 0;
            display: block;
            width: 38px;
            height: 38px;
            background: url('../../../images/tel.png') no-repeat;
            background-size: cover;
          }
          .tel {
            color: #666;
          }
        }
      }
      .btn-group,.time,.info-btn{
        display:inline-block!important;
      }
      .time{
        font-size:0.72rem!important;
        float:left!important;
      }
    }
    .ui-house-li {
      background: #f8f8f8;
    }
  }
.person__house__item {
        padding-left: 18px;
  }
  .h-thumb {
    width: 138px;
    height: 103px;
  }
  .my-house {
    .label {
      span:nth-child(3) {
        display: none;
      }
      @media screen and (max-width: 350px) {
        span:nth-child(2) {
          display: none;
        }
      }
    }
  }
  .house{
    position: relative;
    .mianya-logo{
      position: absolute;
      top:25px;
      left:0px;
      img{
        width:50%;
      }
    }
  }
  .left__wrap {
    position: relative;
  }
  .renter-status{
    span{
    color: #ff9600;
    float:right;
    margin-right:0.8rem;
   }
  }
</style>
